<div class="control-panel">
    <div class="menu-button-wrapper">
        <div class="menu-button" id="update-installed-addon-db" ng-click="!isOpsLocked && onInstDBBtnClicked($event); $event.stopPropagation();" ng-class="{locked: isOpsLocked}">
            <img src="../images/update_installed_addon.png" onmouseover="this.src='../images/update_installed_addon_hover.png'" onmouseout="this.src='../images/update_installed_addon.png'" alt="Update Installed Add-on DB" />
        </div>
    </div>
    <div class="menu-button-wrapper">
        <div class="menu-button" id="update-github-addon-db" ng-click="!isOpsLocked && onGitHubDBBtnClicked($event); $event.stopPropagation();" ng-class="{locked: isOpsLocked}">
            <img src="../images/update_github_addon.png" onmouseover="this.src='../images/update_github_addon_hover.png'" onmouseout="this.src='../images/update_github_addon.png'" alt="Update GitHub Add-on DB" />
        </div>
    </div>
    <div class="menu-button-wrapper">
        <div class="menu-button" id="manage-ignore-addon-db" ng-click="!isOpsLocked && onIgnDBBtnClicked($event); $event.stopPropagation();" ng-class="{locked: isOpsLocked}">
            <img src="../images/manage_ignore_addon_list.png" onmouseover="this.src='../images/manage_ignore_addon_list_hover.png'" onmouseout="this.src='../images/manage_ignore_addon_list.png'" alt="Manage Ignore Add-on DB" />
        </div>
    </div>
    <div class="menu-button-wrapper">
        <div class="menu-button" id="manage-custom-dir" ng-click="!isOpsLocked && onMngCustomDirBtnClicked(); $event.stopPropagation();" ng-class="{locked: isOpsLocked}">
            <img src="../images/manage_custom_install_dir.png" onmouseover="this.src='../images/manage_custom_install_dir_hover.png'" onmouseout="this.src='../images/manage_custom_install_dir.png'" alt="Manage Custom Installation Target" />
        </div>
    </div>
    <div class="menu-button-wrapper">
        <div class="menu-button" id="migrate-addons" ng-click="!isOpsLocked && onMigAddonBtnClicked(); $event.stopPropagation();" ng-class="{locked: isOpsLocked}">
            <img src="../images/migrate_addon.png" onmouseover="this.src='../images/migrate_addon_hover.png'" onmouseout="this.src='../images/migrate_addon.png'" alt="Migrate Addon among Different Blender Versions" />
        </div>
    </div>
</div>
<div class="search-panel">
    <div class="search">
        <div class="searchbar-wrapper">
            <input type="text" name="search-bar" class="searchbar" ng-keyup="onSearchBarUpdated($event)">
        </div>
    </div>
    <div class="sort">
        <div class="sort-item">
            <div class="selectbox-wrapper" ng-show="true">
                <select class="selectbox" name="addonOrderItemSelect" ng-change="onAddonSelectorChanged()" ng-model="$parent.addonOrderItemSelect" ng-options="order as blamTranslate(order.name) for order in addonOrderItemList">
                </select>
            </div>
        </div>
        <div class="sort-order">
            <div class="radiobutton">
                <input type="radio" id="ascend" ng-model="$parent.addonOrder" value="ASCEND" ng-change="onAddonSelectorChanged()">
                <label for="ascend">{{blamTranslate('Ascend');}}</label><br>
                <input type="radio" id="descend" ng-model="$parent.addonOrder" value="DESCEND" ng-change="onAddonSelectorChanged()">
                <label for="descend">{{blamTranslate('Descend');}}</label>
        </div>
        </div>
    </div>
</div>
